<template>
	<view class="coupon-get">
		<view class="order-item-box">
			<mescroll-uni ref="mescroll" :fixed="false" :up="{
				noMoreSize: 10,
				empty: {
					icon: $getImageUri('resource/image/shopapi/uniapp/empty/coupon.png'),
					tip: $zhTran('暂无优惠券~'),
					fixed: true
				}
			}" :bottom="0" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="coupon" v-for="item in couponList" :key="item.id">
					<coupon-card mode='get' bgmode="get" :name="item.name" :money="item.money"
						:condition="item.condition" :time="item.effective_time" :scene="item.use_scene"
						:coupon-id="item.id" :gotten="!!item.is_receive"
						:button="{ name: !item.is_empty?$zhTran(item.is_available==1?'已领取':'领取'):$zhTran('已抢光'), theme: 'primary', disable: !!item.is_empty || !!item.is_available }"
						@button="getCoupon" />
				</view>
			</mescroll-uni>
		</view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>


<script>
	import {
		apiCouponList,
		apiCouponGet
	} from '@/api/store'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

	let mescroll = null

	export default {
		name: 'CouponGet',
		mixins: [MescrollMixin],

		data() {
			return {
				couponList: [], // 优惠券列表
			}
		},

		methods: { // 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCouponList({
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count
				}) => {
					if (num === 1) this.couponList = []
					this.couponList = [...this.couponList, ...lists]
					this.couponList = this.$zhTran(this.couponList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			// 领取优惠券
			getCoupon(id) {
				apiCouponGet({
						id
					})
					.then(() => {
						this.$toast({
							title: this.$zhTran('领取成功')
						})
					})
					.catch(err => {
						console.log(err)
						// this.$toast({ title: '领取失败' })
					}).finally(() => {
						this.refreshOrderData()
					})
			},
		},

		mounted() {},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		},
	}
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
		padding: 0;
	}


	.coupon-get {
		padding: 0 20rpx;
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - constant(safe-area-inset-bottom));
				height: calc(100% - env(safe-area-inset-bottom));
			}
		}
	}

	.coupon {
		padding: 0 20rpx;

		&:nth-child(n+2) {
			margin-top: 20rpx;
		}
	}
</style>